<template>
  <div>
    <a-form :model="value" :form="form">
      <a-row :gutter="24">
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品分类">
<!--            <j-dict-select-tag v-model="productCategoryId" placeholder="请选择商品分类" @input="handleCategoryChange" dictCode="pms_product_category,name,id,show_status='1' order by sort"/>-->

            <a-select
              @change="handleCategoryChange"
              v-model="value.productCategoryId"
              style="width: 100%"
              :getPopupContainer="node => node.parentNode"
              placeholder="请选择商品分类">
              <a-select-option v-for="(category,categoryIndex) in categoryList" :key="categoryIndex.toString()"
                               :value="category.id">
                {{ category.name }}
              </a-select-option>
            </a-select>

          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:2}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="品牌">
<!--            <j-dict-select-tag v-model="brandId" placeholder="请选择品牌" dictCode="pms_brand,name,id"/>-->
            <a-select
              v-model="value.brandId"
              style="width: 100%"
              :getPopupContainer="node => node.parentNode"
              placeholder="请选择品牌">
              <a-select-option v-for="(brand,brandIndex) in brandList" :key="brandIndex.toString()"
                               :value="brand.id">
                {{ brand.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!--<a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="属性分类">
            <j-dict-select-tag v-model="productAttributeCategoryId" placeholder="请选择属性分类" dictCode="pms_product_attribute_category,name,id"/>
          </a-form-item>
        </a-col>-->

        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品名称">
            <a-input placeholder="请输入商品名称" v-model="value.name"/>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="SKU展示">
            <a-input placeholder="请输入SKU展示" v-model="value.skuName"/>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="副标题">
            <a-input placeholder="请输入副标题" v-model="value.subTitle" />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品介绍">
            <a-input placeholder="请输入商品介绍" v-model="value.description" />
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="货号">
            <a-input placeholder="请输入商品货号" v-model="value.productSn" :disabled="value.id !== undefined && value.id !== null"/>
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:2}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="计量单位">
            <a-input placeholder="请输入计量单位" v-model="value.unit" />
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="市场价">
            <a-input-number v-model="value.originalPrice" />
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:2}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="排序">
            <a-input-number v-model="value.sort"/>
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="重量(克)">
            <a-input-number v-model="value.weight" />
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:2}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="颜色">
            <a-input placeholder="请输入商品颜色" v-model="value.color" />
          </a-form-item>

          <!--<a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品价格">
            <a-input-number v-model="value.price" />
          </a-form-item>-->
        </a-col>
        <a-col :md="24" :sm="24" :style="{ textAlign: 'right' }">
          <a-form-item :wrapperCol="{span: 19, offset: 5}">
            <a-button type="primary" @click="nextStep">下一步</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
  import { duplicateCheck } from '@/api/api'
  import { getAction } from '@api/manage'

  export default {
    name: "ProductInfoDetail",
    props: {
      value: Object
    },
    computed:{
      productCategoryId:{
        get(){
          if (this.value.productCategoryId)
            return this.value.productCategoryId.toString();
          else
            return '';
        },
        set(v){
          if('' === v)
            this.value.productCategoryId = '';
          else
            this.value.productCategoryId = parseInt(v);
        }
      },
      brandId:{
        get(){
          if (this.value.brandId)
            return this.value.brandId.toString();
          else
            return '';
        },
        set(v){
          if('' === v)
            this.value.brandId = '';
          else
            this.value.brandId = parseInt(v);
        }
      },
      productAttributeCategoryId:{
        get(){
          if (this.value.productAttributeCategoryId)
            return this.value.productAttributeCategoryId.toString();
          else
            return '';
        },
        set(v){
          if('' === v)
            this.value.productAttributeCategoryId = '';
          else
            this.value.productAttributeCategoryId = parseInt(v);
        }
      },
    },
    created() {
      this.getBrandList()
      this.getCategoryList()
    },
    data () {
      return {
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        brandList: [],
        categoryList: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          name:{rules: [{ required: true, message: '请输入商品名称!' }]},
          productSn:{rules: [{ required: true, message: '请输入货号!' },{validator: this.validateCode}]},
        },
        url: {
          queryByProductCategoryId: '/pms/pmsProductTag/queryByProductCategoryId',
          getBrands: '/pms/pmsBrand/getBrands',
          getProductCategorys: '/pms/pmsProductCategory/getProductCategorys',
        },
      }
    },
    methods: {
      nextStep () {
        this.checkProductSn();
      },
      checkProductSn(){
        let pattern = /^[0-9A-Z]+$/;
        if(!pattern.test(this.value.productSn)){
          this.$message.warning('商品货号不符合规则，只能是大写字母与数字');
        } else {
          var params = {
            tableName: "pms_product",
            fieldName: "product_sn",
            fieldVal: this.value.productSn,
            dataId: this.value.id
          };
          duplicateCheck(params).then((res)=>{
            if(res.success){
              this.$emit('nextStep');
            }else{
              this.$message.warning('货号不可用，系统中已存在');
            }
          })
        }
      },
      handleCategoryChange(e) {
        console.log("productCategory：" + e)
        getAction(this.url.queryByProductCategoryId,{productCategoryId:e}).then(res=>{
          if (res.success) {
            this.value.serviceOptions = res.result.map(data => ({ label: data['name'], value: data['id'] }));
            console.log("serviceOptions：" + this.value.serviceOptions)
          }
        });
      },
      getBrandList() {
        getAction(this.url.getBrands, {}).then(res => {
          if (res.success) {
            this.brandList = res.result
          } else {
            console.log(res.message)
          }
        })
      },
      getCategoryList() {
        getAction(this.url.getProductCategorys, {}).then(res => {
          if (res.success) {
            this.categoryList = res.result
          } else {
            console.log(res.message)
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>